<template>
<div>
  <div style="margin: 10px">
      <div v-for="(newsItem, index) in newsList" :key="index" @click="turn(newsItem.new_id)">
          <h2 style="text-align: left">{{ newsItem.new_title }}</h2>
          <h4 style="text-align: left">{{ newsItem.author }}</h4>
          <div class="demo-image__preview">
              <el-image
                      v-if="newsItem.pictures && newsItem.pictures.length > 0"
                      class="image-item"
                      v-for="(picture, pictureIndex) in newsItem.pictures"
                      :key="pictureIndex"
                      style="width: 300px; height: 200px; border-radius: 8px; margin: 10px"
                      :src="picture.pictureSrc"
                      :preview-src-list="picture.pictureSrc"
              ></el-image>
          </div>
          <h6 style="text-align: right">{{ newsItem.new_time }}</h6>
          <el-divider></el-divider>
      </div>

  </div>
</div>

</template>
<style>
.picture{
    flex: 1;
}
.demo-image__preview {
    display: flex;
    justify-content: space-between; /* 可以根据需要调整对齐方式 */
}

.image-item {
    width: 300px;
    height: 200px;
    border-radius: 8px;
    margin: 10px;
    background-size: cover;
    background-position: center;
}

</style>
<script >
import axios from "axios";

export default {
    data() {
        return {
            activeNames: [],
            pictures:[],
            newsList: [
                {
                },

            ],
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'

            ]
        }
    },
    methods:{
        async getnewlist() {
            const userId = this.$store.getters.getuserId;
            try {
                const response = await axios.get(`/api/news/getAllOwnNews?publisher_id=${userId}`);
                const responseData = response.data;
                this.newsList = await Promise.all(responseData.map(async (newsItem) => {
                    const picturesResponse = await axios.get(`/api/picture?newId=${newsItem.new_id}`);
                    const picturesData = picturesResponse.data;
                    return {
                        ...newsItem,
                        pictures: picturesData,
                    };
                }));
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        },
        async getPictureSrc(imageId) {
            try {
                const response = await axios.get(`/api/picture?newId=${imageId}`);
                const responseData = response.data;
                console.log(responseData[0].pictureSrc)
                return responseData[0].pictureSrc;
            } catch (error) {
                console.error('Error fetching picture data:', error);
                return ''; // 如果获取图片失败，返回一个空字符串或者其他默认值
            }
        },
        async turn(new_id){
                console.log(new_id)
            const newId=new_id;
             // this.$store.dispatch('setnewId', new_id);
            await this.$store.dispatch('setnewId', newId);
                console.log(this.$store.getters.getnewId)
            this.$router.push('/newsdetail');
        }
    },
    mounted() {
        this.getnewlist();
    }
}
</script>